<template>
  <div id="app">
    <div id="cartItem" v-for="item of carts" :key="item.id">
      <van-card
        :price="item.productPrice"
        :desc="item.productInfo"
        :title="item.productName"
        :thumb="item.productCover"
      >
        <template #footer>
          <template> 小计：{{item.productPrice*item.productCount |handleSum }} </template>
          <van-checkbox class="checkItem" v-model="item.isSelected"></van-checkbox>
        </template>
        <template #num>
          <van-stepper min="1" value="item.productCount"/>
        </template>
      </van-card>
    </div>
    <div class="botton">
      <van-submit-bar :price="sum" button-text="提交订单" >
      <van-checkbox v-model="allChecked">全选</van-checkbox>
      
    </van-submit-bar>
    </div>
  </div>
  
</template>

<script>
import Vue from "vue";
import { Card } from "vant";
Vue.use(Card);
import { Checkbox, CheckboxGroup } from "vant";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
import { Stepper } from "vant";
Vue.use(Stepper);
import { SubmitBar } from "vant";
Vue.use(SubmitBar);
export default {
  name: "app",
  data() {
    return {
      carts: [],
    };
  },
  mounted() {
    this.$http.get("/cart").then((res) => {
      this.carts = res.data;
    });
  },
  filters:{
    handleSum(val){
      return val.toFixed(2)+"元";
    }
  },
  computed:{
    sum(){
      var carts =this.carts;
      var all=0;
      carts.forEach(item=>{
        if(item.isSelected){
          all+=item.productPrice*item.productCount
          
        }
      })
      all=all*100
      return all
    },
    allChecked:{
      get(){
        return this.carts.every(item=>item.isSelected)
      },
      set(val){
        this.carts.forEach(item=>{
          item.isSelected=val
        })
      }
    }
  }
};
</script>

<style>
.checkItem {
  position: absolute;
  top: 40%;
  left: 10px;
}
#app {
  width: 400px;
  border: 1px solid #333;
  
}
.van-submit-bar{
  width: 400px !important;
  position: unset !important;
}
#cartItem{
  border-bottom: 1px solid #666;
}
.van-image__img{
  width: 66px;
  position: relative;
  left: 15px;
}
</style>
